<template>
    <view class="content">
        <a-demo title="基础使用">
            <view class="badges">
                <pure-badge value="徽标" :absolute="false"></pure-badge>
            </view>
        </a-demo>

        <a-demo title="圆点模式">
            <view class="badges">
                <pure-badge value="168" mode="dot" :absolute="false"></pure-badge>
            </view>
        </a-demo>

        <a-demo title="主题" desc="通过添加辅助类名实现">
            <view class="badges">
                <pure-badge class="pure-badge-primary" value="168" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-success" value="哈哈" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-danger" value="178" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-warning" value="嘿嘿" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-info" value="98" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-primary" value="168" mode="dot" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-success" value="哈哈" mode="dot" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-danger" value="168" mode="dot" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-warning" value="哈哈" mode="dot" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-info" value="168" mode="dot" :absolute="false"></pure-badge>
            </view>
        </a-demo>

        <a-demo title="溢出模式">
            <view class="badges">
                <pure-badge class="pure-badge-primary" value="1000" mode="overflow" suffix="+" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-success" value="1000" mode="overflow" suffix="..." :absolute="false"></pure-badge>
            </view>
        </a-demo>

        <a-demo title="切割模式">
            <view class="badges">
                <pure-badge class="pure-badge-primary" value="1688" mode="limit" max="1000" suffix="k" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-primary" value="1688" mode="limit" max="1000" suffix="k" :absolute="false" decimal="3"></pure-badge>
                <pure-badge class="pure-badge-success" value="15688" mode="limit" max="10000" suffix="w" :absolute="false"></pure-badge>
                <pure-badge class="pure-badge-success" value="15688" mode="limit" max="10000" suffix="w" :absolute="false" decimal="3"></pure-badge>
            </view>
        </a-demo>
    </view>
</template>

<script setup></script>

<style scoped>
    .badges {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }
</style>
